<template>
	<view class="findMusic" v-if="showFlag">
		<u-navbar title="发现音乐" :is-back="false" :background="background" title-color="#fff"></u-navbar>
		<view class="u-page">
			<view class="swiper">
				<u-swiper :list="swiperList"></u-swiper>
			</view>
			<view class="content">
				<u-grid :col="2">
					<u-grid-item @click="goNextPage(0)">
						<u-icon name="paixing" custom-prefix="custom-icon" :size="60"></u-icon>
						<view class="grid-text">排行榜</view>
					</u-grid-item>
					<u-grid-item @click="goNextPage(1)">
						<u-icon name="sousuo" custom-prefix="custom-icon" :size="60"></u-icon>
						<view class="grid-text">搜索</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="SongSheetList">
				<view class="item" v-for="item in songSheetList" :key="item.imgUrl" @click="goNextPage2(item)">
					<view class="img">
						<image :src="item.imgUrl" class="image" mode="widthFix"></image>
					</view>
					<view class="title">
						{{item.sheetName}}
					</view>
				</view>
			</view>
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar :list="list" :active-color="textColor"></u-tabbar>
	</view>
</template>

<script>
	import { mapState, mapMutations } from "vuex"
	export default {
		data() {
			return {
				background: {},
				textColor: "",
				RouteList: ["/pages/RankList/RankList", "/pages/Search/Search"],
				swiperList: [{
						image: '/static/img/swiper1.jpg',
					},
					{
						image: '/static/img/swiper2.jpg',
					},
					{
						image: '/static/img/swiper3.jpg',
					},
					{
						image: '/static/img/swiper4.jpg',
					},
					{
						image: '/static/img/swiper5.jpg',
					},
				],
				songSheetList: [],
				showFlag: false,
			}
		},
		computed: {
			...mapState({
				list:({config})=>config.tabBarList,
				commonColor: ({config})=>config.commonColor,
				openid: ({config})=>config.openid,
			})
		},
		methods: {
			...mapMutations({
				SET_songSheetItem: "config/SET_songSheetItem",
				SET_openid: "config/SET_openid", // 系统的openid
				CLEAR_ALL: "config/CLEAR_ALL", 
			}),
			getList() {
				this.background["backgroundColor"] = this.commonColor;
				this.textColor= this.commonColor;
				this.$http.post("/querySongSheet.htm").then(res => {
					if(res.result.length) {
						let songSheetList = res.result;
						songSheetList.filter((item, index) => {
							item["imgUrl"] = `/static/img/songSheep${index+1}.jpg`;
						})
						this.songSheetList = songSheetList;
					}
				})
			},
			goNextPage(index) {
				uni.navigateTo({
				    url: this.RouteList[index],
				});
			},
			goNextPage2(item) {
				this.SET_songSheetItem(item);
				uni.navigateTo({
					url: `/pages/SongSheetItem/SongSheetItem?item=${JSON.stringify(item)}`
				})
			}
		},
		created() {
			// #ifdef MP-WEIXIN
			//调用微信获取code
			let that = this;
			// if(!this.openid) {
				wx.login({
				  success (res) {
				    if (res.code) {
				      //发起网络请求
					  that.$http.get("/auth.htm", {
						  jsCode: res.code,
						  appId: "wx1fb06d87038ead14",
						  secret: "6e835ec490a9ed65b7c59b58f937eb42",
						  // grantType: "authorization_code"
					  }).then(res => {
						  that.CLEAR_ALL();
						  // that.getUserInfo();
						  that.SET_openid(res.result.openid);
						  console.log(that.openid);
						  if(that.openid) {
							  that.showFlag = true;
							  that.getList();
						  }
					  })
				    } else {
				      console.log('登录失败！' + res.errMsg)
				    }
				  }
				})
			// }
			// #endif
			// #ifdef H5
				this.showFlag = true;
				this.getList();
			// #endif
		}
	}
</script>

<style lang="less" scoped>
/deep/ .u-grid-item-box {
	padding: 50rpx 0 !important;
}
/deep/ .u-icon__icon {
	color: #d43c33;
}
.findMusic {
	display: flex;
	flex-direction: column;
	height: 100%;
	.u-page {
		flex: 1;
		// overflow: hidden;
		padding: 0 20rpx;
		.swiper {
			width: 100%;
			padding: 30rpx 0;
		}
		.content {
			.grid-text {
				font-size: 28rpx;
				margin-top: 4rpx;
			}
		}
		.SongSheetList {
			margin-top: 30rpx;
			display: flex;
			flex-wrap: wrap;
			background-color: #fff;
			.item {
				width: 50%;
				padding: 20rpx;
				.img {
					width: 100%;
					.image {
						width: 100%;
						border-radius: 10rpx;
					}
				}
				.title {
					font-size: 30rpx;
					letter-spacing: 3rpx;
					overflow: hidden;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					box-orient: vertical;
					display: -webkit-box;
					display: box;
				}
			}
		}
	}
}
</style>
